JS 模版替换语法
模版替换的技巧并没有过时,只不过隐藏在了众多的框架之下,当你熟练地掌握模版替换语言的解析与使用,相信可以在不同的业务场景中都能找到一些有趣且高效的解决方案。
使用正则进行模版替换
从最简单的场景开始,假设我只想将变量灌到模版里去,我会选择
这里是已有的
在模版中可以定义任意的 JS 解析字符串,如:{{data}}
、<%word%>
等,对于这种情况,只需要通过正则表达式的子模式匹配:
const data = {
name: 'vv13',
profile: { gender: 'male', hobby: 'coding' }
}
const template = '<p> Hello, I\'m {{name}}, I like {{profile.hobby}}!</p>'
const matcher = /\{\{\s?(\w+)\s?\}\}/
template.replace(matcher.exec(template)[0], data[matcher.exec(template)[1]])
前置知识:new Function
每个 JavaScript 函数实际上都是一个 Function 对象,Function 具有一个构造函数,我们可以用它来动态创建函数:
new Function ([arg1[, arg2[, ...argN]],] functionBody)
其中 arg 必须是合法命名的参数,也支持用逗号分割:a
, b
, a, b
,functionBody 则为包含函数定义的字符串,以下为一些示例:
new Function('a', 'b', 'return a + b'); // 基础语法
new Function('a,b', 'return a + b'); // 逗号分隔
new Function('a , b', 'return a + b'); // 逗号和空格分隔
// 等效于
function(a, b) { return a + b }
简单的传值模版
在模版中可以定义任意的 JS 解析字符串,如:{{data}}
、<%word%>
等,对于这种情况,只需要通过正则表达式的子模式匹配:
const data = {
name: 'vv13'
}
const template = '<p> Hello, I\'m {{name}}.</p>'
const matcher = /\{\{\s?(\w+)\s?\}\}/
template.replace(matcher.exec(temmplate)[0], data[matcher.exec(template)[1]])
多行匹配
若想要在模版中真正的执行模版 JavaScript 语法,就需要我们去构造动态的脚本来生成字符串了,而 Function 构造方法正好可以实现这一特性。假设有一串模版字符串:
<% if (show) { %>
<p>Hello World, <% name%>!</p>
<% } %>
在这样的模版语法中,我们可以采取一个策略,通过一个数组来收集当前的字符串片段,保持原样的顺序:./
var r=[];
if (show) {
r.push("<p>Hello World, ")
r.push(name)
r.push("!</P>")
}